<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>软件因素</span>
          <el-button class="button" text @click.stop="openDetail">{{ showDetail ? '收起' : '查看详情' }}</el-button>
        </div>
      </template>
      <div class="text item">
        <el-button :icon="Refresh" circle @click="getSwfValue" />
        <p v-if="swf != null">当前因子（SWF）：{{swf}}</p>
        <p v-else>尚未评议</p>
      </div>
    </el-card>
    <transition name="expand">
      <div v-if="showDetail" class="detail-content">
        <h2>模块C1的详细信息</h2>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="pdf-container">
              <embed :src="pdfPath" width="100%" height="500px" type="application/pdf" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="questions">
              <el-form @submit.prevent="validateForm">
                <div class="question">
                  <el-form-item label="规模估算" :error="errors.period">
                    <el-radio-group v-model="answers.period" :disabled="disabled">
                      <el-radio label="0">估算早期</el-radio>
                      <el-radio label="1">估算中期</el-radio>
                      <el-radio label="2">估算晚期</el-radio>
                      <el-radio label="3">交付、运维</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="question">
                  <el-form-item label="业务领域" :error="errors.business">
                    <el-radio-group v-model="answers.business" :disabled="disabled">
                      <el-radio label="电子政务">电子政务</el-radio>
                      <el-radio label="金融">金融</el-radio>
                      <el-radio label="电信">电信</el-radio>
                      <el-radio label="制造">制造</el-radio>
                      <el-radio label="能源">能源</el-radio>
                      <el-radio label="交通">交通</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="question">
                  <el-form-item label="应用领域" :error="errors.appType">
                    <el-radio-group v-model="answers.appType" :disabled="disabled">
                      <el-radio label="业务处理">业务处理</el-radio>
                      <el-radio label="应用集成">应用集成</el-radio>
                      <el-radio label="科技">科技</el-radio>
                      <el-radio label="多媒体">多媒体</el-radio>
                      <el-radio label="智能信息">智能信息</el-radio>
                      <el-radio label="系统">系统</el-radio>
                      <el-radio label="通信控制">通信控制</el-radio>
                      <el-radio label="流程控制">流程控制</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="question">
                  <el-form-item label="分布式" :error="errors.qualityDistributed">
                    <el-radio-group v-model="answers.qualityDistributed" :disabled="disabled">
                      <el-radio label="-1">没有明示对分布式处理的需求事项</el-radio>
                      <el-radio label="0">通过网络进行客户端/服务器及网络基础应用分布处理和传输</el-radio>
                      <el-radio label="1">通过特别的设计保证在多个服务器及处理器上同时相互执行应用中的处理功能</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="question">
                  <el-form-item label="性能" :error="errors.qualityPerformance">
                    <el-radio-group v-model="answers.qualityPerformance" :disabled="disabled">
                      <el-radio label="-1">没有明示对性能的特别需求事项或仅需提供基本性能</el-radio>
                      <el-radio label="0">应答时间或处理率对高峰时间或所有业务时间来说都很重要，存在对连动系统结束处理时间的限制</el-radio>
                      <el-radio label="1">为满足性能需求事项，要求设计阶段开始进行性能分析，或在设计、开发阶段使用分析工具</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="question">
                  <el-form-item label="可靠性" :error="errors.qualityMultiple">
                    <el-radio-group v-model="answers.qualityMultiple" :disabled="disabled">
                      <el-radio label="-1">没有明示对可靠性的特别需求事项或仅需提供基本的可靠性</el-radio>
                      <el-radio label="0">发生故障时带来较多不便或经济损失</el-radio>
                      <el-radio label="1">发生故障时造成重大经济损失或有生命危害</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="question">
                  <el-form-item label="多重站点" :error="errors.qualityReliability">
                    <el-radio-group v-model="answers.qualityReliability" :disabled="disabled">
                      <el-radio label="-1">在相同的硬件或软件环境下运行</el-radio>
                      <el-radio label="0">在设计阶段需要考虑不同站点的相似硬件或软件环境下运行需求</el-radio>
                      <el-radio label="1">在设计阶段需要考虑不同站点的不同硬件或软件环境下运行需求</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <el-button type="primary" native-type="submit" class="save-button">保存</el-button>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-button @click="closeDetail" class="close-button" type="primary" size="large">关闭</el-button>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { updateSwfInfo, getSwfInfo } from '../../api/Cost/swfApi';
import { currentProjectTask } from './Variables/costVariables';
import { Refresh } from '@element-plus/icons-vue';
import { getProjectDetails } from '../../api/Report/projectData';
import { getProcess, updateProcessHistory } from '../../api/Cost/costApi';
import { ElMessage } from 'element-plus';

const swf = ref();

const showDetail = ref(false);
const disabled = ref(false);

const pdfPath = ref();

const processSet = ref({
  pdr_process: 0,
  rdf_process: 0,
  swf_process: 0,
  rsk_process: 0,
  cost_process: 0,
  total_process: 0
});
const task = ref();

const fetchProcess = async () => {
  const res = await getProcess(currentProjectTask.projectId);
  processSet.value = res.data;
  task.value = res.task;
  updateProcessHistory(task.value);
};

const getPDFUrl = async () => {
  const res = await getProjectDetails(currentProjectTask.projectId);
  pdfPath.value = res.project.url;
};
getPDFUrl();

const getSwfValue = async () => {
  const res = await getSwfInfo(currentProjectTask.projectId);
  swf.value = res.swf_data.swf;
};
getSwfValue();

const answers = ref({
  projectId: currentProjectTask.projectId,
  qualityDistributed: null,
  qualityPerformance: null,
  qualityMultiple: null,
  qualityReliability: null,
  business: null,
  appType: null,
  period: null
});

const errors = ref({
  qualityDistributed: '',
  qualityPerformance: '',
  qualityMultiple: '',
  qualityReliability: '',
  business: '',
  appType: '',
  period: ''
});

const validateForm = () => {
  let valid = true;

  if (answers.value.period === null) {
    errors.value.period = '请选择规模估算';
    valid = false;
  } else {
    errors.value.period = '';
  }

  if (answers.value.business === null) {
    errors.value.business = '请选择业务领域';
    valid = false;
  } else {
    errors.value.business = '';
  }

  if (answers.value.appType === null) {
    errors.value.appType = '请选择应用领域';
    valid = false;
  } else {
    errors.value.appType = '';
  }

  if (answers.value.qualityDistributed === null) {
    errors.value.qualityDistributed = '请选择分布式处理';
    valid = false;
  } else {
    errors.value.qualityDistributed = '';
  }

  if (answers.value.qualityPerformance === null) {
    errors.value.qualityPerformance = '请选择性能';
    valid = false;
  } else {
    errors.value.qualityPerformance = '';
  }

  if (answers.value.qualityMultiple === null) {
    errors.value.qualityMultiple = '请选择可靠性';
    valid = false;
  } else {
    errors.value.qualityMultiple = '';
  }

  if (answers.value.qualityReliability === null) {
    errors.value.qualityReliability = '请选择多重站点';
    valid = false;
  } else {
    errors.value.qualityReliability = '';
  }

  if (valid) {
    onSubmit();
  }
};

const openDetail = async () => {
  showDetail.value = true;
};

const closeDetail = () => {
  showDetail.value = false;
};

const onSubmit = async () => {
  console.log("保存结果：", answers.value);
  await updateSwfInfo(answers.value);
  await getSwfValue();
  await fetchProcess();
  closeDetail();
  ElMessage({
      message: '保存成功',
      type: 'success',
    });
  console.log(swf);
};
</script>


<style scoped>
.box-card {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  height: 260px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.box-card::before {
  content: 'SWF';
  font-size: 170px;
  background: linear-gradient(to right, #f8c51e5c, #83e16b5c); /* 渐变色 */
  -webkit-background-clip: text;
  color: transparent; /* 使文字本身透明，显示背景的渐变色 */
  position: absolute;
  top: 60%;
  left: 50%;
  font-weight: bold;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 确保文字不可交互 */
}

.box-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  align-items: center;
  font-weight: bold;
}

.text {
  font-size: 16px;
  margin-top: 10px;
  color: black;
}

.detail-content {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background-color: #fff;
  z-index: 1000;
  padding: 20px;
  overflow: hidden; /* 防止整体内容溢出 */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform: scale(1);
  opacity: 1;
  transition: all 0.5s ease;
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.5s ease;
}

.expand-enter,
.expand-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

.pdf-container {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: 100%; /* 使PDF容器占满其所在的列 */
}

.questions {
  padding: 10px;
  max-height: calc(80vh - 100px); /* 计算高度，减去页眉和其他空间 */
  overflow-y: auto; /* 使问题部分可以滚动 */
}

.question {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.question:hover {
  background-color: #e0f7fa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.el-radio {
  margin: 5px 0;
}

.save-button {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  background: linear-gradient(to right, #42a5f5, #478ed1);
  border: none;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.save-button:hover {
  background: linear-gradient(to right, #478ed1, #42a5f5);
}

.save-button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.el-divider {
  margin: 20px 0;
}

.el-form-item__error {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}
</style>
